<template>
  <div>
    <!-- 分页组件 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="pageinfo.page" :page-sizes="[10, 30, 50, 100]" :page-size="pageinfo.limit" layout="total, sizes, prev, pager, next, jumper" :total="pageinfo.total"> </el-pagination>
    <!-- 滚动组件，target触发滚动的对象.el-main为上级标签-->
    <el-backtop target=".el-main" :right="60" :bottom="20" ref="backtop"></el-backtop>
  </div>
</template>

<script>
export default {
  props: ["pageinfo"], //接收父组件传过来的值
  computed: {
    // 总条数除以每页的条数向上取整得到最大显示页数
    pages() {
      return Math.ceil(this.pageinfo.total / this.pageinfo.limit)
    }
  },
  methods: {
    //每页显示条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //未改变之前显示的条数
      let index = this.pageinfo.limit
      //改变之后的条数
      this.pageinfo.limit = val
      //判断当前页码是否等于当前总页数
      if (Math.ceil(this.pageinfo.total / index) == this.pageinfo.page) {
        this.pageinfo.page = this.pages
      }
      this.changePagination()
    },
    //当前页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageinfo.page = val
      this.changePagination()
    },
    //子传父
    changePagination() {
      this.$emit('change', this.pageinfo)   //给父组件传事件名和值
      //触发滚动组件的点击事件
      setTimeout(() => {
        this.$refs.backtop.$el.click?.()
      }, 300);
    }
  }
}
</script>
